<template>
  <div>
    <el-form :inline="true" style="margin-top: 30px" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司" v-if="isBranch">
        <el-select v-model="formInline.branchId" style="width: 180px" filterable clearable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司" v-else>
        <el-input v-model="this.branchName" disabled></el-input>
      </el-form-item>
      <el-form-item label="内容ID">
        <el-input v-model="formInline.id" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="内容名称">
        <el-input v-model="formInline.name" style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.state" style="width: 150px" filterable clearable>
          <el-option label="新建待审核" value="2"></el-option>
          <el-option label="编辑待审核" value="5"></el-option>
          <el-option label="下线待审核" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="margin-left: 0px">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      @selection-change="selectChange"
      style="width: 100%"
      border>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="内容名称"
        show-overflow-tooltip
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="contentModeName"
        label="内容形式"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="branchName"
        label="分公司"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column label="申请时状态" align="center" width="100">
        <template scope="scope">
          <span v-if="scope.row.applyStatus === 1">草稿</span>
          <span v-if="scope.row.applyStatus === 3">待上线</span>
          <span v-if="scope.row.applyStatus === 4">上线</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyOperate"
        label="申请动作"
        show-overflow-tooltip
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="onlineComment"
        label="上线说明"
        align="center"
        width="130">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="100" >
        <template scope="scope">
          <el-button @click="detail(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button @click="approve(scope.$index, scope.row, $event)" type="success" size="small"><i class="el-icon-check"></i></el-button>
          <el-button @click="noApprove(scope.$index, scope.row, $event)" type="danger" size="small"><i class="el-icon-close"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" style="float:left;margin-top:10px" @click="lotCheck">批量审核</el-button>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--详情弹窗-->
    <el-dialog title="详情" :visible.sync="detailDialog" top="10%" class="detail-info">
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="编辑前" name="before">
            <div class="form-item">
              <pre style="margin-left: -60px;margin-bottom: -20px;line-height: 25px">
                状态：{{detailData.oldData.stateName}}
                内容名称：{{detailData.oldData.name}}
                内容备注：{{detailData.oldData.comment}}
                内容形式：{{detailData.oldData.contentModeName}}
                分公司：{{detailData.oldData.branchName}}
                上线类型：{{detailData.oldData.onlineModeName}}
                上线生效时间：{{detailData.oldData.onlineTime}}
                上线备注：{{detailData.oldData.onlineComment}}
                下线类型：{{detailData.oldData.offlineModeName}}
                下线生效时间：{{detailData.oldData.offlineTime}}
                下线备注：{{detailData.oldData.offlineComment}}
                创建人：{{detailData.oldData.createUser}}
                创建时间：{{detailData.oldData.createTime}}
                编辑人：{{detailData.oldData.updateUser}}
                编辑时间：{{detailData.oldData.updateTime}}
                审核人：{{detailData.oldData.auditor}}
                审核时间：{{detailData.oldData.auditTime}}
              </pre>
            </div>
            <div class="form-item">
              <el-table
                :data="detailData.oldData.newContentDatas"
                style="width: 100%"
                border>
                <el-table-column
                  prop="productId"
                  label="商品ID"
                  width="100">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="productName"
                  min-width="200"
                  label="商品名称">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="编辑后" name="after">
            <div class="form-item">
              <pre style="margin-left: -60px;margin-bottom: -20px;line-height: 25px">
                状态111：{{detailData.newData.stateName}}
                内容名称：{{detailData.newData.name}}
                内容备注：{{detailData.newData.comment}}
                内容形式：{{detailData.newData.contentModeName}}
                分公司：{{detailData.newData.branchName}}
                上线类型：{{detailData.newData.onlineModeName}}
                上线生效时间：{{detailData.newData.onlineTime}}
                上线备注：{{detailData.newData.onlineComment}}
                下线类型：{{detailData.newData.offlineModeName}}
                下线生效时间：{{detailData.newData.offlineTime}}
                下线备注：{{detailData.newData.offlineComment}}
                创建人：{{detailData.newData.createUser}}
                创建时间：{{detailData.newData.createTime}}
                编辑人：{{detailData.newData.updateUser}}
                编辑时间：{{detailData.newData.updateTime}}
                审核人：{{detailData.newData.auditor}}
                审核时间：{{detailData.newData.auditTime}}
              </pre>
            </div>
            <div class="form-item">
              <el-table
                :data="detailData.newData.newContentDatas"
                style="width: 100%"
                border>
                <el-table-column
                  prop="productId"
                  label="商品ID"
                  width="100">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="productName"
                  min-width="200"
                  label="商品名称">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
    <!--审核弹窗-->
    <el-dialog
      title="审核信息"
      size="tiny"
      :visible.sync="dialogCheck">
      <p></p>
      <span>审核状态：</span>
      <template>
        <el-radio class="radio" v-model="radio" label="1">审核通过</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-input style="margin-top: 20px" v-model="noReason" placeholder="请输入审核意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheck = false">关 闭</el-button>
        <el-button type="primary" @click="makeCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { column } from '../../config/proxy.js'
  import mixins from '../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        selectGroup: [],
        dialogCheck: false,
        noReason: '',
        radio: '1',
//      查询条
        formInline: {
          branchId: '',
          id: '',
          name: ''
        },
//      表格
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
//      编辑待审核-详情弹窗
        activeName: 'after',
        detailDialog: false,
        detailData: {
          oldData: {},
          newData: {}
        }
      }
    },
    methods: {
      selectChange (selection) { // 多选框
        this.selectGroup = selection
        console.log(this.selectGroup)
      },
      makeCheck () {
        var checkGroup = []
        this.selectGroup.forEach((item, index) => {
          var a = {}
          a.id = item.id
          a.type = item.state
          checkGroup.push(a)
        })
        const datm = {
          auditObjects: checkGroup,
          auditor: this.userName,
          reason: this.noReason,
          status: this.radio
        }
        console.log(datm)
        column.content.lotCheck(datm, res => {
          if (res.message === 'ok') {
            this.dialogCheck = false
            this.onSubmit()
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      lotCheck () {
        if (this.selectGroup.length === 0) {
          this.$message({
            showClose: true,
            message: '请先选择需要审核的数据',
            type: 'error'
          })
        } else {
          this.dialogCheck = true
        }
      },
      onSubmit () {
        this.isLoading = true
        const _data = Object.assign(this.formInline, this.pageData)
        console.log(_data)
        column.content.checkList(_data, (res) => {
          console.log(res, '内容审核分页数据')
          if (res.message === 'ok') {
            this.tableData = res.content.content
            this.total = res.content.count
            this.pageData.page = res.content.page
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      },
      detail (index, row, event) {
        if (row.state !== 5) {
          this.openNewWindow('contenta_detail', '内容详情', 'contenta_detail', row.id)
        } else {
          this.activeName = 'after'
          column.content.detail({id: row.id, type: row.state}, (res) => {
            if (res.message === 'ok') {
              this.detailData.oldData = res.content.old
              this.detailData.newData = res.content.edit
              this.detailDialog = true
            } else {
              this.$message({
                showClose: true,
                message: '查看详情失败',
                type: 'error'
              })
            }
          })
        }
      },  // 详情
      approve (index, row) {
        column.content.approve({id: row.id, auditor: this.userName, type: row.state}, res => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: 'ok',
              type: 'success'
            })
            this.onSubmit()
            this.$store.dispatch('contentState', this.$store.state.updateState.contentState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },   // 审核
      noApprove (index, row) {
        this.$prompt('请输入不通过理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          if (value === null) {
            this.$message({
              showClose: true,
              message: '请输入不通过理由',
              type: 'error'
            })
          } else {
            column.content.noApprove({id: row.id, auditor: this.userName, type: row.state, reason: value}, res => {
              if (res.message === 'ok') {
                this.$message({
                  showClose: true,
                  message: 'ok',
                  type: 'success'
                })
                this.onSubmit()
                this.$store.dispatch('contentState', this.$store.state.updateState.contentState + 1)
              } else {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'error'
                })
              }
            })
          }
        }).catch(() => {
        })
      } // 审核不通过
    },
    computed: {
      userName: function (state) {
        return this.$store.state.user.info.user_name
      },
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      update_state: function () {
        return this.$store.state.updateState.contentCheckState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      this.formInline.branchId = this.branchId
      this.onSubmit()
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>

